<template>
  <div>
    <el-row>
      <!--      <el-badge :value="12" class="item" style="margin-top: 20px;margin-bottom: 20px">-->
      <!--        <el-button size="small">预约提醒</el-button>-->
      <!--      </el-badge>-->
      <!--      <el-badge :value="12" class="item" style="margin-top: 20px;margin-bottom: 20px;margin-left: 20px">-->
      <!--        <el-button size="small">到期提醒</el-button>-->
      <!--      </el-badge>-->
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card :body-style="{ padding: '1rem',background:'#7aa0a6',height:'130rem'} " shadow="hover">
          <h1 style="text-align: center;font-size: 30rem">课题总数</h1>
          <h1 style="text-align: center;font-size: 30rem">{{researchNumber[0]}}</h1>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card :body-style="{ padding: '1rem',background:'#4f8db4',height:'130rem'} " shadow="hover">
          <h1 style="text-align: center;font-size: 30rem">进行中</h1>
          <h1 style="text-align: center;font-size: 30rem">{{researchNumber[1]}}</h1>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card :body-style="{ padding: '1rem',background:'#1c70a4',height:'130rem'} " shadow="hover">
          <h1 style="text-align: center;font-size: 30rem">已完成</h1>
          <h1 style="text-align: center;font-size: 30rem">{{researchNumber[2]}}</h1>
        </el-card>
      </el-col>
      <!--      <el-col :span="6">-->
      <!--        <el-card :body-style="{ padding: '0px',background:'#F5A749',height:'100px'} " shadow="hover">-->
      <!--          <h1 style="text-align: center">已延期</h1>-->
      <!--          <h1 style="text-align: center">4</h1>-->
      <!--        </el-card>-->
      <!--      </el-col>-->
    </el-row>
    <div>
      <div class="container1">
        <div id="quality_pie" style="width: 25%;height: 300rem;float:left"></div>
        <div id="cooperate_pie" style="width: 25%;height: 300rem;float:left"></div>
        <div id="subject_bar" style="width: 50%;height: 300rem;float:left"></div>
      </div>
      <div class="container2">
        <div id="year_stacked" style="width: 45%;height:300rem;float:left;"></div>
        <div id="set_stacked" style="width: 45%;height:300rem;float:left"></div>
      </div>
    </div>

  </div>
</template>
<script>
import * as echarts from 'echarts'
import research from '@/api/research'

export default {
  data() {
    return {
      statData:{},
      color:['#7aa0a6','#4f8db4','#1c70a4','green','cyan'],
      researchNumber:[0,0,0]
    }
  },
  methods: {

    year_stacked_init() {
      var x_data = [];
      var y_data = [];
      //console.log(Object.values(this.statData.yearBar))

      try{
        for(let key in this.statData.yearBar)
        {
          x_data.unshift(key);
          y_data.unshift(this.statData.yearBar[key])
          // console.log(x_data)
          // console.log('aaa')
          // console.log(y_data)
        }

      }catch (e) {
        console.log(e)
      }

      var chartDom = document.getElementById('year_stacked');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '年龄分布',
          textStyle:{
            fontSize: "20rem"
          },
          left: "3%"
        },
        grid: {
          left: '3%',
          right: '10%',
          bottom: '3%',
          top: '30%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: x_data,
          name:'年龄',
          nameTextStyle:{
            fontSize: "15rem"
          },
          axisLabel: {
            textStyle:{
              fontSize: "15rem"
            }
          }
        },
        yAxis: {
          type: 'value',
          name:'数量',
          nameTextStyle:{
            fontSize: "15rem"
          },
          axisLabel: {
            textStyle:{
              fontSize: "15rem"
            }
          }
        },
        color: this.color,
        series: [
          {
            data: y_data,
            type: 'bar'
          }
        ]
      };

      myChart.setOption(option);

    },
    quality_pie_init() {

      var chartDom = document.getElementById('quality_pie');
      var myChart = echarts.init(chartDom);

      var data =  [
        { value: 0, name: '高' },
        { value: 0, name: '中' },
        { value: 0, name: '低' },
      ]
      try {
        data[0].value = this.statData.qualityRate.高
        data[1].value = this.statData.qualityRate.中
        data[2].value = this.statData.qualityRate.低
      }catch (e) {
        data =  [
          { value: 0, name: '高' },
          { value: 0, name: '中' },
          { value: 0, name: '低' },
        ]
      }


      var option = {
        title: {
          text: '主观质量评估分布',
          left: 'center',
          textStyle:{
            fontSize: "20rem"
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left:"9%",
          textStyle:{
            fontSize: "15rem"
          }
        },
        color: this.color,
        series: [
          {
            name: '主观质量评估',
            type: 'pie',
            radius: '70%',
            top:"15%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label:{
              textStyle:{
                fontSize:"15rem"
              },
            }
          }
        ]
      };

      myChart.setOption(option);

    },
    cooperate_pie_init() {
      var chartDom = document.getElementById('cooperate_pie');
      var myChart = echarts.init(chartDom);
      var data =  [
        { value: 0, name: '高' },
        { value: 0, name: '中' },
        { value: 0, name: '低' },
      ]
      try {
        data[0].value = this.statData.complianceRate.高
        data[1].value = this.statData.complianceRate.中
        data[2].value = this.statData.complianceRate.低
      }catch (e) {
        data =  [
          { value: 0, name: '高' },
          { value: 0, name: '中' },
          { value: 0, name: '低' },
        ]
      }





      var option = {
        title: {
          text: '受试者配合程度分布',
          left: 'center',
          textStyle:{
            fontSize: "20rem"
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left:"9%",
          textStyle:{
            fontSize: "15rem"
          }
        },
        color: this.color,
        series: [
          {
            name: '受试者配合程度',
            type: 'pie',
            radius: '70%',
            top:"15%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label:{
              textStyle:{
                fontSize:"15rem"
              }
            }
          }
        ]
      };

      myChart.setOption(option);

    },
    subject_bar_init() {
      var chartDom = document.getElementById('subject_bar')
      var myChart = echarts.init(chartDom)
      var option;
      let subject = []
      let incompleteData = []
      let completeData = []

      let finishBar = this.statData.finishBar
      for(let key in finishBar)
      {
        subject.push(key)
        incompleteData.push(finishBar[key]["incomplete"])
        completeData.push(finishBar[key]["complete"])
      }

      option = {
        title: {
          text: '课题完成情况',
          left: "3%",
          textStyle:{
            fontSize: "20rem"
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          textStyle:{
            fontSize: "15rem"
          },
          top:"10%"
        },
        grid: {
          left: '3%',
          right: '10%',
          bottom: '3%',
          top: '30%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          name:'数量',
          nameTextStyle:{
            fontSize: "15rem"
          },
          axisLabel: {
            textStyle:{
              fontSize: "15rem"
            }
          }
        },
        yAxis: {
          type: 'category',
          data: subject,
          name:'课题',
          nameTextStyle:{
            fontSize: "15rem"
          },
          axisLabel: {
            textStyle:{
              fontSize: "15rem"
            },
            formatter: function(val){
              let str = ''
              str = val.length >= 8 ? val.substring(0, 7) + '...' : val
              return str
            },
          }
        },
        color: this.color,
        series: [
          {
            name: '已完成',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle:{
                fontSize: "15rem"
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: completeData
          },
          {
            name: '未完成',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle:{
                fontSize: "15rem"
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: incompleteData
          }
        ]
      }

      option && myChart.setOption(option)

    },
    set_stacked_init() {
      var chartDom = document.getElementById('set_stacked');
      var myChart = echarts.init(chartDom);
      var option;

      var seriesData = [];
      var legendData = [];
      try {
        for (let key in this.statData.collectionBar) {

          var item = {
            type: 'line',
            name: key,
            data: []
          }
          for( let key1 in this.statData.collectionBar[key])
          {
            var item1 = [];
            item1.push(key1)
            item1.push(this.statData.collectionBar[key][key1])
            item.data.push(item1)
          }
          seriesData.push(item)
          legendData.push(key)
        }
        // console.log("======123======")
        // console.log(seriesData)

      } catch (e) {
        console.log(e)
      }
      // console.log("+====++++")
      // console.log(seriesData)
      // console.log(legendData)

      option = {
        title: {
          text: '中心完成情况',
          left: "3%",
          textStyle:{
            fontSize: "20rem"
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:legendData,
          textStyle:{
            fontSize: "15rem"
          },
          top: "10%"
          //data: ['中心1']
        },
        grid: {
          left: '3%',
          right: '10%',
          bottom: '3%',
          top: '30%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time',
          name: '时间',
          nameTextStyle:{
            fontSize: "15rem"
          },
          axisLabel: {
            textStyle: {
              fontSize: "15rem"
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '数量',
          nameTextStyle:{
            fontSize: "15rem"
          },
          axisLabel: {
            textStyle:{
              fontSize: "15rem"
            }
          }
        },
        color: this.color,
        series: seriesData,
      };

      option && myChart.setOption(option);

    },
    getStat() {
      research.getResearchStatByUser(this.$store.getters.name).then(
        response=>{
          this.statData = response.data;
          if(response.data.researchNumber!=undefined)
          {
            this.researchNumber = response.data.researchNumber;
          }

          //console.log(this.statData)

          //this.sex_pie_init();
          this.quality_pie_init();
          this.cooperate_pie_init();
          // this.QA_stacked_init();
          this.year_stacked_init();
          this.subject_bar_init();
          this.set_stacked_init();

        }
      )

    }
  },
  created() {
    let width = document.body.clientWidth;
    // console.log(width)
    let fontsize = (width / 2203)
    document.documentElement.style.fontSize = fontsize + "px"

  },
  mounted() {

    // console.log(this.$store.getters.name+"+++++++++++++++++++++++++++++++")
    this.getStat()
    while(this.$store.getters.name==null)
    {

    }
    // console.log("收到请求")

    //
    // console.log(this.$store.getters.name)
    // console.log(this.$store.getters.name)
    // console.log(this.$store.getters.name)
    // console.log(this.$store.getters.name)


    // this.quality_pie_init()
    // this.cooperate_pie_init()
    // this.year_stacked_init()
    // this.subject_bar_init()
    // this.set_stacked_init()



  }

}

</script>
<style>
.container1{
  margin-top: 80rem;
  height: 350rem;
  margin-left: 40rem;
  margin-right: 40rem;
//border-style:solid;
}
.container2{
  margin-top: 80rem;
  height: 350rem;
  margin-left: 40rem;
  margin-right: 40rem;
//border-style:solid;
}

</style>
